---
title: AttachmentPrimitive
---

Buttons to interact with attachments.

import { ParametersTable, DataAttributesTable } from "@/components/docs";
import { Code } from "@radix-ui/themes";
import { Callout } from "fumadocs-ui/components/callout";

<Callout>
  **Dual Use!** Attachments can appear in both messages and composers.
</Callout>

## Anatomy

```tsx
import { AttachmentPrimitive } from "@assistant-ui/react";

const MyMessageAttachment = () => (
  <AttachmentPrimitive.Root>
    <AttachmentPrimitive.Thumbnail />
    <AttachmentPrimitive.Name />
  </AttachmentPrimitive.Root>
);

const MyComposerAttachment = () => (
  <AttachmentPrimitive.Root>
    <AttachmentPrimitive.Thumbnail />
    <AttachmentPrimitive.Name />
    <AttachmentPrimitive.Remove />
  </AttachmentPrimitive.Root>
);
```

## API Reference

### Container

Containts all parts of the attachment.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveRootProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### Thumbnail

The thumbnail of the attachment.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveThumbnailProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### Name

The name of the attachment.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveNameProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### Remove

Removes the attachment.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveRemoveProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>
